<template>
    <div class="nav">
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" :style="{ 'line-height': '64px', 'font-size': '20px' }" @click="onClick"/>
    </div>
    <div class="cont">
        <RouterView></RouterView>
    </div>
</template>

<script setup>
import { RouterView } from 'vue-router';
import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'

const router = new useRouter()

const current = ref(['mail']);
const items = ref([
  {
    key: 'marketprice',
    icon: () => h(MailOutlined),
    label: '吉市价',
    title: '信息价、市场价',
  },
  {
    key: 'inquiry',
    icon: () => h(AppstoreOutlined),
    label: '吉时询',
    title: '自主发布询价单',
  },
  {
    key: 'perchase',
    icon: () => h(AppstoreOutlined),
    label: '吉时购',
    title: '一站式采购',
  },
  {
    key: 'selective',
    icon: () => h(AppstoreOutlined),
    label: '吉优选',
    title: '优选配置',
  },
  {
    key: 'consult',
    icon: () => h(AppstoreOutlined),
    label: '吉咨询',
    title: '造价咨询服务',
  },
  {
    key: 'digital',
    icon: () => h(AppstoreOutlined),
    label: '吉数智',
    title: '造价指标',
  },
  {
    key: 'brands',
    icon: () => h(AppstoreOutlined),
    label: '吉品汇',
    title: '品牌展示',
  },
  {
    key: 'share',
    icon: () => h(AppstoreOutlined),
    label: '吉共享',
    title: '信息共享',
  },
  {
    key: '9',
    icon: () => h(AppstoreOutlined),
    label: '金融服务',
    title: '融资链接',
  },
  {
    key: '10',
    icon: () => h(AppstoreOutlined),
    label: '关于我们',
    title: '关于我们',
  }
]);

const onClick = (item) => {
  console.log(item.key)
  router.push(item.key)
}
</script>

<style scoped>
.nav{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    margin: 10px;
    border-radius: 10px;
}
.cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F2F2F2;
    margin-bottom: 10px;
}
</style>